BEGIN {
	print "<canvas id=\"canvas\" width=\"1000\" height=\"1500\"></canvas>";
	print "<script>";
	print "	 var canvasContext = document.getElementById(\"canvas\").getContext(\"2d\");"

	y = 10; 
	y_increment = 5;
	x_scale = 10;


	print "for (var x = 0; x <= 100; x += 10) {";
	print "  canvasContext.beginPath();";
	print "  canvasContext.moveTo(x*" x_scale ", 0);";
	print "  canvasContext.lineTo(x*" x_scale ", 1500);";
	print "  canvasContext.lineWidth = 0.5;";
	print "  canvasContext.strokeStyle = 'rgba(" r ", 0, 0, 0.2)';";
	print "  canvasContext.stroke();";
	print "}";
}

{
	num = $2;
	rec = $3;
	max = $4;
	min = $5;
	avg = $6;
	maxRec = $7;
	r = $8;
	
if (y < 1500 && rec > 0) {
	y = y + y_increment;
	print "	  canvasContext.beginPath();";
	print "	  canvasContext.moveTo(" min * x_scale ", " y ");";
	print "	  canvasContext.lineTo(" max * x_scale ", " y ");";
	print "	  canvasContext.lineWidth = 1;";
	print "	  canvasContext.strokeStyle = 'rgba(" r ", 0, 0, 1)';";
	print "	  canvasContext.stroke();";
	
	print "	  canvasContext.beginPath();";
	print "	  canvasContext.arc(" avg * x_scale ", " y ", 2, 0, 2*Math.PI);";
	print "	  canvasContext.stroke();";
}
}

END {
	print "</script>";
}